<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
  <style>
    .active {
      color: red
    }

    #app {
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <!-- jsx  -->
  <div id="app"></div>
  <script type="text/babel">
    // jsx : javaScript Xml  是一种虚拟的dom的语法糖
    // react 使用jsx ： 1. 引入babel.js 文件， 将jsx语法转化为js语法
    //                 2.  设置script 标签的type="text/babel"

    // jsx 注意点：
    // 1. 标签必须闭合  ， html 不要要加引号
    // 2. jsx是js 和html 混写， 那么jsx遇到 js代码需要使用和{} ； {}是插值表达式
    // 3. jsx 里标签添加类名是 className="类名"， 不是class 添加类名
    // 4. jsx 里标签的行内样式是  style={{样式名 ： 样式值}} 
    // 5. jsx 里必须有一个根标签
    // 6. 自定义组件首字母需要大写
    // 7. jsx里的注释 ： {/* 我是注释*/}

    let myname = "zhangsan"
    // let vdom =
    //   <div>
    //     <h1>我的名字是{myname}</h1>
    //     <h1>我是标题</h1>
    //     <p className="active" style={{ fontSize: "30px" }}>我是内容</p>
    //     {/* 我是注释*/}
    //   </div>
    // console.log(vdom);

    // let root = ReactDOM.createRoot(document.querySelector("#app"))
    // root.render(vdom)

    let arr = [{ name: "张三", age: 20 }, { name: "张三2", age: 21 }, { name: "张三3", age: 25 }];

    let vdom = (
      <ul>
        {arr.map((item, index) => (
          <li key={index}>
            姓名是{item.name}; 年龄是{item.age}
          </li>
        ))}
      </ul>
    );

    let root = ReactDOM.createRoot(document.querySelector("#app"));
    root.render(vdom);

  </script>
</body>

</html>